<template>
  <div class="login_bg">
    <div class="login_main">
      <div class="login_config">
        <el-button
          :icon="c.dark ? 'el-icon-sunny' : 'el-icon-moon'"
          circle
          type="info"
          @click="configDark"
        >
        </el-button>
        <el-dropdown
          trigger="click"
          placement="bottom-end"
          @command="configLang"
        >
          <el-button circle>
            <span v-show="locale === 'zh-cn'">中</span>
            <span v-show="locale === 'en'">en</span>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item
                v-for="item in lang"
                :key="item.value"
                :command="item"
                >{{ item.name }}</el-dropdown-item
              >
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
      <div class="login-form">
        <div class="login-header">
          <div class="logo">
            <img :alt="$CONFIG.APP_NAME" :src="logo" />
            <label>{{ $CONFIG.APP_NAME }}</label>
          </div>
        </div>
        <el-tabs>
          <el-tab-pane :label="t('login.accountLogin')" lazy>
            <password-form></password-form>
          </el-tab-pane>
          <el-tab-pane :label="t('login.mobileLogin')" lazy>
            <phone-form></phone-form>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "index",
};
</script>
<script setup>
import tool from "@/utils/tool";
import { reactive, watch, ref } from "vue";
import phoneForm from "./components/phoneForm.vue";
import passwordForm from "./components/passwordForm.vue";
import config from "@/config";
import { useI18n } from "vue-i18n";
import { useStore } from "vuex";
import {
  CLEAR_IFRAMELIST,
  CLEAR_KEEPLIVE,
  CLEAR_VIEWTAGS,
} from "@/store/types";

let c = ref({
  lang: tool.data.get("APP_LANG") || config.LANG,
  dark: tool.data.get("APP_DARK") || false,
});

let { t, locale } = useI18n();
const store = useStore();

const logo = require("@/assets/logo.png");

const lang = reactive([
  {
    name: "简体中文",
    value: "zh-cn",
  },
  {
    name: "English",
    value: "en",
  },
]);

// 切换主题的方法
const configDark = () => {
  c.value.dark = c.value.dark ? false : true;
};

// 切换语言的方法
const configLang = (command) => {
  c.value.lang = command.value;
  console.log(c.value.lang);
};

//监听主题变化
watch(
  () => c.value.dark,
  (val) => {
    if (val) {
      document.documentElement.classList.add("dark");
      tool.data.set("APP_DARK", val);
    } else {
      document.documentElement.classList.remove("dark");
      tool.data.remove("APP_DARK");
    }
  }
);

//监听语言变化
watch(
  () => c.value.lang,
  (val) => {
    locale.value = val;
    tool.data.set("APP_LANG", val);
  }
);
//初始化
function init() {
  tool.cookie.remove("TOKEN");
  tool.data.remove("USER_INFO");
  tool.data.remove("MENU");
  tool.data.remove("PERMISSIONS");
  tool.data.remove("grid");
  store.commit(`viewTags/${CLEAR_VIEWTAGS}`);
  store.commit(`keepAlive/${CLEAR_KEEPLIVE}`);
  store.commit(`iframe/${CLEAR_IFRAMELIST}`);
}

init();
</script>

<style lang="scss" scoped>
@import "./index";
</style>
